<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>cascader 无限级联选择器 cascader - layui 第三方组件平台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="基于 layui 扩展的无限级联选择器，支持异步获取数据，以及自定义事件触发。组件使用简单，暴露的参数容易理解，欢迎使用">
    <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
    <link rel="stylesheet" href="/layui/dist/css/layui.css">
    <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
    <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
    <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
</head>
<body>
<div class="layui-header header header-extends" style="background-color: #24262F;">
    <div class="layui-container"><a class="logo" href="/">
        <img src="/static/images/layui/logo.png" alt="layui"> </a>
        <div class="layui-form component" lay-filter="LAY-site-header-component"></div>
        <ul class="layui-nav">
            <li class="layui-nav-item layui-hide-xs"><a href="/">框架</a></li>
            <li class="layui-nav-item layui-hide-xs layui-this"><a href="/extend/index.html">扩展</a></li>
            <li class="layui-nav-item"><a href="javascript:;">周边</a>
                <dl class="layui-nav-child layui-nav-child-c">
                    <dd lay-unselect><a href="/alone.html" target="_blank">独立组件</a></dd>
                    <dd class="layui-hide-sm layui-show-xs" lay-unselect><a href="/extend/">扩展组件</a>
                        <hr>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>
</div>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]-->
<div class="fly-extend-banner fly-extend-banner-sm">
    <div class="layui-carousel" id="FLY-extend-banner" data-height="200px">
        <div carousel-item>
            <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
                <div style="background: rgba(0,0,0,.6)"></div>
            </div>
        </div>
    </div>
    <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1>
    <div class="fly-extend-banner-release"><a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
    </div>
</div>
<div class="fly-extend-detail layui-card">
    <div class="layui-container">
        <div class="fly-extend-list-header"><h1 class="fly-extend-title layui-elip"><a>cascader 无限级联选择器</a> <span
                class="layui-badge layui-bg-green layui-hide-xs">cascader</span></h1>
            <div class="fly-extend-list-info"><a href="/u/21065688" target="_blank" class="fly-extend-list-user"
                                                 title="发布者"> <cite class="layui-hide-xs">凉宫</cite> <img
                    src="/avatar/21065688.jpg?t=1549848966194" alt="凉宫"> </a></div>
        </div>
        <blockquote class="fly-extend-list-desc layui-elem-quote"><p>基于 layui
            扩展的无限级联选择器，支持异步获取数据，以及自定义事件触发。组件使用简单，暴露的参数容易理解，欢迎使用</p></blockquote>
        <div class="fly-extend-list-bottom"><span class="layui-inline">更新：2019-6-28 </span> <span class="layui-inline">创建：2018-8-29 </span>
            <div class="layui-btn-container layui-extend-doc-edit"></div>
        </div>
    </div>
</div>
<div class="layui-container">
    <div class="layui-row layui-col-space20">
        <div class="layui-col-sm3 layui-col-md2">
            <div class="layui-card">
                <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav">
                    <li class="layui-this" lay-id="doc"><a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a>
                    </li>
                    <li lay-id="download"><a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a></li>
                </ul>
            </div>
        </div>
        <div class="layui-col-sm9 layui-col-md10">
            <div class="layui-card fly-extend-doc layui-show">
                <div class="layui-card-header"><h3 class="layui-inline layui-this">文档</h3></div>
                <div class="layui-card-body detail-body photos layui-text"> html元素<br>
                    <pre>&lt;div class=&quot;layui-form-item&quot;&gt;<br>    &lt;label class=&quot;layui-form-label&quot;&gt;选择框&lt;/label&gt;<br>    &lt;div class=&quot;layui-input-block&quot;&gt;<br>        &lt;input type=&quot;text&quot; id=&quot;a&quot; class=&quot;layui-input&quot; readonly=&quot;readonly&quot;&gt;<br>    &lt;/div&gt;<br>&lt;/div&gt;</pre>
                    js引用<br>
                    <pre>layui.use([&#39;form&#39;,&quot;jquery&quot;,&quot;cascader&quot;], function(){<br>    var $ = layui.jquery;<br>    var cascader = layui.cascader;<br>    <br>    var data = [<br>        {<br>            value: &#39;A&#39;,<br>            label: &#39;a&#39;,<br>            children: [<br>                {<br>                    value: &#39;AA1&#39;,<br>                    label: &#39;aa1&#39;,<br>                },<br>                {<br>                    value: &#39;BB1&#39;,<br>                    label: &#39;bb1&#39;<br>                }<br>            ]<br>        },<br>        {<br>            value: &#39;B&#39;,<br>            label: &#39;b&#39;,<br>        }<br>    ]<br>    var cas=cascader({<br>        elem: &quot;#a&quot;,<br>        data: data,<br>        // url: &quot;/aa&quot;,<br>        // type: &quot;post&quot;,<br>        // triggerType: &quot;change&quot;,<br>        // showLastLevels: true,<br>        // where: {<br>        //     a: &quot;aaa&quot;<br>        // },<br>        value: [&quot;A&quot;, &quot;AA1&quot;],<br>        success: function (data) {<br>            console.log(data);<br>        }<br>    });<br><br>    cas.reload({})  // 重载<br>});</pre>
                    cascader参数说明<br>
                    <pre>1. elem：input容器<br>2. data：需要的静态数据，类型为数组，<br>3. url：异步获取的数据，类型为数组，（data与url两个参数二选一）<br>4. type：异步获取的方式，默认get，可省略<br>5. where：异步传入的参数，可省略<br>6. triggerType：触发方式，不填或其他都为click，可选参数&quot;change&quot;，即鼠标移入触发<br>7. showLastLevels：输入框是否只显示最后一级,默认false，即全显示<br>8. value：传入的初始值，类型为数组，值为data的value值<br>9. success：回调函数，选择完成之后的回调函数，返回值为value数组</pre>
                    cascader函数<br>
                    <pre>1. cas.reload(): 可重新渲染数据</pre>
                    <a href="https://layuiextend.hsianglee.cn/cascader/" target="_blank" rel="nofollow">在线demo</a> <br>
                    <a href="https://github.com/hsiangleev/layuiExtend" target="_blank" rel="nofollow">github源码</a> <br>
                </div>
            </div>
            <div class="layui-card fly-extend-doc">
                <div class="layui-card-header"><h3 class="layui-inline layui-this">下载</h3></div>
                <div class="layui-card-body detail-body layui-text">
                    <div class="layui-btn-container"><a href="/extend/21065688_1561702398876_20789.zip"
                                                        target="_blank"
                                                        class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> <a
                            href="https://github.com/hsiangleev/layuiExtend" target="_blank"
                            class="layui-btn layui-btn-lg layui-btn-primary layui-border-black"> 去 GitHub 下载 </a>
                        <blockquote class="layui-elem-quote"> 该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。</blockquote>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="fly-footer">
    <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
</div>
<script src="/layui/dist/layui.js"></script>
<script>// common</script>

</body>
<script src="/common/common.js"></script>
</html>